<template>
	<view class="main">
		<view class="top">
			<view class="left">
				<view class="left-top">
					我是左上
				</view>
				<view class="left-bottom">
					我是左下
				</view>
			</view>
			<view class="right">
				<view class="right-top">
					我是右边
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="b1">
				我是底部1
			</view>
			<view class="b2">
				我是底部2
			</view>
			<view class="b3">
				我是底部3
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				
			}
		},
		methods:{
			
		}
	}
</script scoped>

<style lang="scss">
	.main {
		display: flex;
		padding: 30rpx 50rpx;
		flex-direction: column;
		
		.top {
			width: 100%;
			height: 300rpx;
			display: flex;
			align-items: center;
			background-color: aqua;
			justify-content: space-around;
			
		}
		
		.bottom {
			width: 100%;
			position: fixed;
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			bottom: 0;
			left: 0;
			background-color: pink;
		}
	}
</style>